import bg from '@/assets/flowerbg.webp';
import lf from '@/assets/lf.jpg';
import rg from '@/assets/rg.jpg';
import { history } from '@umijs/max';
import { Tooltip } from 'antd';
import { memo } from 'react';
import './index.less';
const Index = memo(() => {
  return (
    <div className="wave-card">
      <div className="bg-card">
        <img src={bg} alt="" className="bg" />
        <div className="bg-mask"></div>
      </div>
      <div className="avators">
        <div className="avators-lf">
          <Tooltip>
            <div>
              <img src={lf} alt="" className="lf-img" />
              <div>111</div>
            </div>
          </Tooltip>
        </div>
        <div className="heart">
          <Tooltip
            title={<div style={{ color: 'red' }}>{'永远在一起!!'}</div>}
            color="linear-gradient(
      to top,
      rgba(255, 255, 255, 4),
      rgba(255, 236, 232, 8)
    )"
          >
            <div className="love" onClick={() => history.push('/')}></div>
          </Tooltip>
        </div>
        <div className="avators-rg">
          <div>
            <img src={rg} alt="" className="rg-img" />
            <div>222</div>
          </div>
        </div>
      </div>
      <svg
        className="waves"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28"
        preserveAspectRatio="none"
        shapeRendering="auto"
      >
        <defs>
          <path
            id="gentle-wave"
            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
          />
        </defs>
        <g className="parallax">
          <use
            xlinkHref="#gentle-wave"
            x="48"
            y="0"
            fill="rgba(255,255,255,0.7"
          />
          <use
            xlinkHref="#gentle-wave"
            x="48"
            y="3"
            fill="rgba(255,255,255,0.5)"
          />
          <use
            xlinkHref="#gentle-wave"
            x="48"
            y="5"
            fill="rgba(255,255,255,0.3)"
          />
          <use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
  );
});
export default Index;
